<template lang="">
  <div class="jiajain">
    <div class="r1" v-if="shNums >=1" @click="clickCrease">-</div>
    <div class="r2" v-if="shNums >=1">{{shNums}}</div>
    <div class="r3" @click="clickAdd">+</div>
  </div>
</template>

<script>
  import $ from "jquery"
  export default {
    name: "addOrCrease",
    data() {
      return {
        shNums: 0,
        totalPrice: 0,
        shopsInfos1: [],
      }
    },
    computed: {
      totalsInfo() {
        return this.$store.state.pri.totals;
      },
    },
    props: ['addInfo'],
    methods: {
      clickCrease() {
        this.shNums--;
        let shopsId = this.addInfo.restaurant_id;//店铺id
        let categoryId = this.addInfo.category_id;//商铺分类id
        let itemId = this.addInfo.item_id;//专属商铺的id
        let prices = this.addInfo.specfoods[0].price//商品价格
        const _this = this;
        $.ajax({
          url: "/api/find2Pros",
          type: "post",
          data: {
            uid: 1,
            shopsId: shopsId,
            categoryId: categoryId,
            itemId: itemId,
          },
          success: function (data) {
            console.log(data)
            if (data.length != 0) {
              $.ajax({
                url: "/api/updPro",
                type: "post",
                data: {
                  id: data[0]._id,
                  num: _this.shNums,
                },
                success: function (data) {
                  console.log(data)
                }
              })
            }
          }
        })
        this.totalPrice = (this.totalPrice - 0) - (1 * prices);
        $(".priceL").html("￥" + this.totalPrice + ".00");
        if (this.totalPrice != 0) {
          $(".bottom_3").css("backgroundColor", "#4cd964");
          $(".bottom_31").html("去结算");
          $(".icon").css("backgroundColor", "#3190e8");
        } else {
          $(".bottom_3").css("backgroundColor", "#535356");
          $(".bottom_31").html("还差￥20起送");
          $(".icon").css("backgroundColor", "#333");
        }
      },
      clickAdd() {
        this.shNums++;
        let flag = true;
        let shopsId = this.addInfo.restaurant_id;//店铺id
        let categoryId = this.addInfo.category_id;//商铺分类id
        let itemId = this.addInfo.item_id;//专属商铺的id
        let name = this.addInfo.name;//商品名字
        let prices = this.addInfo.specfoods[0].price//商品价格
        const _this = this;
        $.ajax({
          url: "/api/find1Pros",
          type: "post",
          data: {
            uid: 1,
            shopsId: shopsId,
          },
          success: function (data) {
            if (data.length > 0) {
              data.forEach(function (v) {
                if (v.sId3 == itemId) {
                  flag = false;
                  $.ajax({
                    url: "/api/updPro",
                    type: "post",
                    data: {
                      id: v._id,
                      num: _this.shNums,
                    },
                    success: function (data) {
                      console.log(data)
                    }
                  })
                }
              })
              if (flag) {
                $.ajax({
                  url: "/api/addPro",
                  type: "post",
                  data: {
                    uid: '1',
                    shopsId: shopsId,//店铺id
                    categoryId: categoryId,//商铺分类id
                    itemId: itemId,//专属商铺的id
                    name: name,//商品名字
                    num: _this.shNums,//数量
                    prices: prices,//商品价格
                    ifBug: false,
                  }
                })
              }
            } else {
              $.ajax({
                url: "/api/addPro",
                type: "post",
                data: {
                  uid: '1',
                  shopsId: shopsId,//店铺id
                  categoryId: categoryId,//商铺分类id
                  itemId: itemId,//专属商铺的id
                  name: name,//商品名字
                  num: _this.shNums,//数量
                  prices: prices,//商品价格
                  ifBug: false,
                }
              })
            }
          }
        })
        this.totalPrice = (this.totalPrice - 0) + (1 * prices);
        $(".priceL").html("￥" + this.totalPrice + ".00");
        $(".bottom_3").css("backgroundColor", "#4cd964");
        $(".bottom_31").html("去结算");
        $(".icon").css("backgroundColor", "#3190e8");
      }
    },

    created() {
      const _this = this;
      this.totalsInfo.forEach(function (v) {
        _this.totalPrice = _this.totalPrice + (v.num * v.price)
      })
      $.ajax({
        url: "/api/findPros",
        type: "post",
        data: {
          uid: 1,
          shopsId: this.addInfo.restaurant_id,
          categoryId: this.addInfo.category_id,
          itemId: this.addInfo.item_id,
        },
        success: function (data) {
          data.forEach(function (v) {
            _this.shNums = v.num;
          })

        }
      })
    },
  }
</script>

<style lang="less" scoped>
  .jiajain {
    position: absolute;
    right: 25px;
    bottom: 20px;
    text-align: center;
    display: flex;
    justify-content: space-around;
  }

  .r1 {
    width: 18px;
    height: 18px;
    font-size: 18px;
    border-radius: 50%;
    line-height: 18px;
    background-color: #fff;
    border: 1px solid #3190e8;
    color: #3190e8;
    text-align: center;
    align-items: center;
  }

  .r2 {
    margin: 0 10px;
  }

  .r3 {
    width: 18px;
    height: 18px;
    font-size: 18px;
    border-radius: 50%;
    line-height: 18px;
    background-color: #fff;
    border: 1px solid #3190e8;
    color: #3190e8;
    text-align: center;
    align-items: center;
  }
</style>